Progressiivisten verkkosovellusten syvälinkitys: Sovelluksen tilan palauttaminen URL-osoitteen perusteella

Progressiiviset verkkosovellukset (PWA) ovat mullistaneet tavan, jolla koemme verkkosovelluksia. Ne yhdistävät natiivisovellusten parhaat ominaisuudet verkon saavutettavuuteen, tarjoten offline-toiminnallisuuksia, push-ilmoituksia ja saumattoman käyttökokemuksen. Yksi keskeinen osa PWA-käyttökokemuksen parantamisessa on syvälinkityksen toteuttaminen tehokkaalla tilan palauttamisella.

Mitä on syvälinkitys?

Syvälinkitys on kyky käyttää URL-osoitetta ohjaamaan käyttäjiä tiettyyn paikkaan tai sisältöön mobiilisovelluksessa tai PWA:ssa. Sen sijaan, että sovellus avautuisi vain aloitusnäyttöön, syvälinkki voi viedä käyttäjän suoraan tuotesivulle, asetusnäkymään tai mihin tahansa muuhun tiettyyn sisältöön. PWA-sovellusten kontekstissa syvälinkitys tarkoittaa, että URL ei ainoastaan käynnistä PWA:ta, vaan myös palauttaa sovelluksen tilan vastaamaan käyttäjän odottamaa kontekstia.

Miksi syvälinkitys on tärkeää PWA-sovelluksille?

Syvälinkitys on välttämätöntä useista syistä:

• Parannettu käyttökokemus: Käyttäjät voivat välittömästi päästä käsiksi tiettyyn sisältöön ilman tarvetta navigoida koko sovelluksen läpi. Tämä on ratkaisevan tärkeää nykypäivän nopeatempoisessa digitaalisessa maailmassa, jossa käyttäjät odottavat välitöntä tyydytystä.
• Parempi sitoutuminen: Syvälinkit markkinointikampanjoissa, sosiaalisen median julkaisuissa tai sähköpostiuutiskirjeissä voivat ohjata käyttäjiä suoraan relevanttiin sisältöön PWA:n sisällä, mikä lisää sitoutumista ja konversioita.
• Saumaton jakaminen: Käyttäjät voivat helposti jakaa tiettyä sisältöä PWA:n sisällä muille yksinkertaisen URL-osoitteen avulla. Vastaanottaja voi sitten suoraan päästä samaan sisältöön omassa PWA-instanssissaan.
• SEO-hyödyt: Hakukoneet indeksoivat PWA-sovelluksia, ja syvälinkit mahdollistavat hakukoneiden indeksoida ja indeksoida tiettyä sisältöä sovelluksen sisällä, mikä parantaa näkyvyyttä ja hakukonesijoituksia.
• Sovelluksen tilan säilyttäminen: Oikein toteutettu syvälinkitys voi säilyttää sovelluksen tilan, varmistaen että käyttökokemus pysyy johdonmukaisena jopa sen jälkeen, kun sovellus suljetaan ja avataan uudelleen syvälinkin kautta. Tämä on ensisijaisen tärkeää monimutkaisissa sovelluksissa tai työnkuluissa.

Sovelluksen tilan ja palauttamisen ymmärtäminen

Sovelluksen tila viittaa dataan, joka määrittelee PWA-sovelluksesi nykyisen tilan. Tämä voi sisältää:

• Nykyisen näytettävän sivun tai näkymän.
• Ostoskorin sisällön.
• Käyttäjän syötteen lomakkeessa.
• Vieritysposition sivulla.
• Tunnistautumisen tilan.

Sovelluksen tilan palauttaminen tarkoittaa, että kun käyttäjä avaa PWA:n syvälinkin kautta, sovellus palautetaan täsmälleen siihen tilaan, jossa se oli linkin luontihetkellä. Tämä on ratkaisevan tärkeää sujuvan ja intuitiivisen käyttökokemuksen kannalta. Kuvittele käyttäjä täyttämässä pitkää lomaketta; jos hän sulkee sovelluksen ja avaa sen uudelleen ilman asianmukaista tilan palauttamista, hänen olisi aloitettava alusta. Syvälinkitys sovelluksen tilan palauttamisella ratkaisee tämän ongelman.

Kuinka toteuttaa PWA-syvälinkitys sovelluksen tilan palauttamisella

Syvälinkityksen toteuttaminen sovelluksen tilan palauttamisella sisältää useita vaiheita:

1. Määrittele URL-rakenne

Hyvin määritelty URL-rakenne on ratkaisevan tärkeä tehokkaan syvälinkityksen kannalta. Mieti, miten sovelluksesi sisältö ja toiminnot vastaavat tiettyjä URL-osoitteita. Käytä johdonmukaista ja loogista rakennetta, joka on helppo ymmärtää ja ylläpitää.

Esimerkki:

Ajatellaan verkkokaupan PWA-sovellusta. URL-rakenteesi voisi näyttää tältä:

• / (Etusivu)
• /products (Kaikkien tuotteiden lista)
• /products/<product-id> (Tietty tuotesivu, esim. /products/123)
• /cart (Ostoskori)
• /checkout (Kassaprosessi)
• /profile (Käyttäjäprofiili)

Monimutkaisempaa tilanhallintaa varten voit käyttää kyselyparametreja:

• /products?category=electronics (Elektroniikkakategorian tuotteiden lista)
• /search?q=keyword (Hakutulokset hakusanalle "keyword")

2. Käsittele saapuvat URL-osoitteet

PWA-sovelluksesi on pystyttävä käsittelemään saapuvia URL-osoitteita ja poimimaan tarvittavat tiedot sovelluksen tilan palauttamiseksi. Tämä edellyttää tyypillisesti JavaScriptin käyttöä URL-osoitteen jäsentämiseen ja sovelluksen tilan päivittämiseen vastaavasti. Ensisijainen paikka käsitellä saapuvia URL-osoitteita on PWA:n pääsovelluslogiikassa tai reitittimessä.

Esimerkki JavaScriptillä:

            
function handleDeepLink() {
  const url = new URL(window.location.href);
  const path = url.pathname;

  switch (path) {
    case '/products':
      // Näytä tuotelista
      displayProducts();
      break;
    case '/cart':
      // Näytä ostoskori
      displayCart();
      break;
    default:
      if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        // Näytä määritetyn tuotteen tiedot
        displayProductDetails(productId);
      } else {
        // Näytä etusivu
        displayHomePage();
      }
  }

  // Käsittele kyselyparametrit
  const category = url.searchParams.get('category');
  if (category) {
    // Suodata tuotteet kategorian mukaan
    filterProductsByCategory(category);
  }

  const searchQuery = url.searchParams.get('q');
  if (searchQuery) {
    // Suorita haku
    performSearch(searchQuery);
  }
}

// Kutsu handleDeepLink-funktiota sovelluksen latautuessa
handleDeepLink();

// Kuuntele URL-osoitteen muutoksia (käyttäen History API:a)
window.addEventListener('popstate', handleDeepLink);

            

              
                Copy
              
            
          

Tämä esimerkki osoittaa, kuinka URL-osoite jäsennetään ja sovelluksen tila päivitetään polun ja kyselyparametrien perusteella. handleDeepLink-funktio kutsutaan, kun sovellus latautuu ja aina kun URL-osoite muuttuu (sovelluksen sisäisen navigoinnin seurauksena). Huomaa popstate-tapahtumankuuntelijan käyttö. Tämä on välttämätöntä selaimen takaisin/eteenpäin-painikkeiden navigoinnin käsittelemiseksi PWA-sovelluksessasi.

3. Tallenna ja palauta sovelluksen tila

Jotta voit tehokkaasti palauttaa sovelluksen tilan, tarvitset mekanismin tarvittavien tietojen tallentamiseen ja niiden noutamiseen, kun sovellus avataan uudelleen syvälinkin kautta. Tähän voidaan käyttää useita menetelmiä, joilla kullakin on omat etunsa ja haittansa.

Local Storage

Local Storage on yksinkertainen ja kätevä tapa tallentaa pieniä määriä dataa käyttäjän selaimeen. Se on ihanteellinen esimerkiksi käyttäjäasetusten, todennustunnisteiden tai pienen ostoskorin sisällön tallentamiseen. Local Storagella on kuitenkin rajallinen tallennuskapasiteetti, eikä sitä tule käyttää suurten tai arkaluonteisten tietojen tallentamiseen.

Esimerkki Local Storagen käytöstä:

            
// Tallenna nykyinen tuotetunnus
localStorage.setItem('currentProductId', productId);

// Palauta tuotetunnus
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
  displayProductDetails(currentProductId);
}

            

              
                Copy
              
            
          

Session Storage

Session Storage on samankaltainen kuin Local Storage, mutta data tallennetaan vain käyttäjän session ajaksi. Kun käyttäjä sulkee selainvälilehden tai -ikkunan, data poistetaan automaattisesti. Session Storage soveltuu väliaikaisten tietojen tallentamiseen, joita ei tarvita useiden sessioiden välillä.

Evästeet (Cookies)

Evästeet ovat pieniä tekstitiedostoja, jotka tallennetaan käyttäjän tietokoneelle. Niitä käytetään usein käyttäjän toiminnan seuraamiseen ja asetusten tallentamiseen. Evästeillä on kuitenkin useita rajoituksia, kuten pieni tallennuskapasiteetti ja mahdolliset tietosuojaongelmat. Nykyaikaiset PWA-sovellukset suosivat usein Local Storagea tai IndexedDB:tä evästeiden sijaan.

IndexedDB

IndexedDB on tehokkaampi ja joustavampi tallennusratkaisu kuin Local Storage tai evästeet. Se on NoSQL-tietokanta, jonka avulla voit tallentaa suuria määriä jäsenneltyä dataa käyttäjän selaimeen. IndexedDB on ihanteellinen monimutkaisen sovellustilan, kuten suuren ostoskorin sisällön, käyttäjäprofiilien tai offline-datan tallentamiseen.

Esimerkki IndexedDB:n käytöstä:

            
// Avaa tietokanta
const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Virhe tietokannan avaamisessa:', event);
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Tallenna nykyisen tuotteen tiedot
  const transaction = db.transaction(['products'], 'readwrite');
  const objectStore = transaction.objectStore('products');
  const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });

  addRequest.onsuccess = function(event) {
    console.log('Tuote lisätty tietokantaan');
  };

  // Nouda tuotteen tiedot
  const getRequest = objectStore.get(productId);

  getRequest.onsuccess = function(event) {
    const product = event.target.result;
    if (product) {
      displayProductDetails(product.id, product.name, product.price);
    }
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};

            

              
                Copy
              
            
          

Tämä esimerkki näyttää, kuinka avataan IndexedDB-tietokanta, tallennetaan tuotetiedot ja noudetaan ne myöhemmin. onupgradeneeded-tapahtumaa käytetään objektisäilön luomiseen, jos sitä ei ole ennestään olemassa.

Service Workerit ja välimuistiin tallentaminen

Service Workerit voivat siepata verkkopyyntöjä ja palvella välimuistissa olevia vastauksia, mikä mahdollistaa PWA:n toiminnan offline-tilassa tai rajoitetulla yhteydellä. Niitä voidaan myös käyttää sovelluksen tilan tallentamiseen ja palauttamiseen. Tallentamalla tarvittavat tiedot välimuistiin voit varmistaa, että sovellus pysyy toiminnassa, vaikka käyttäjä olisi offline-tilassa.

4. Käsittele erilaisia skenaarioita

Kun toteutat syvälinkitystä sovelluksen tilan palauttamisella, on tärkeää käsitellä erilaisia skenaarioita sulavasti:

• Sovellusta ei ole asennettu: Jos käyttäjä napsauttaa syvälinkkiä, mutta PWA:ta ei ole asennettu, sinun tulisi ohjata hänet PWA:n asennussivulle (esim. sovelluskauppaan tai PWA:n kotisivulle, jossa on asennuskehotus). Harkitse viivästetyn syvälinkityksen käyttöä (katso alla).
• Sovellus on jo käynnissä: Jos PWA on jo käynnissä taustalla, sinun tulisi tuoda se etualalle ja palauttaa sovelluksen tila. Tämä saattaa vaatia clients.matchAll()-metodin käyttöä Service Workerissä olemassa olevan PWA-instanssin löytämiseksi.
• Virheellinen tai vanhentunut syvälinkki: Jos syvälinkki on virheellinen tai vanhentunut, sinun tulisi näyttää käyttäjälle virheilmoitus ja ohjata hänet relevantille sivulle PWA:n sisällä (esim. kotisivulle tai hakutulossivulle).
• Luvat: PWA:t vaativat usein käyttäjän lupia (sijainti, kamera, ilmoitukset). Käsittele lupapyynnöt sulavasti ja selitä, miksi ne ovat tarpeellisia syvälinkkiin liittyvän toiminnallisuuden kannalta.

Edistyneet syvälinkitystekniikat

Perusasioiden lisäksi tässä on joitakin edistyneitä tekniikoita PWA-sovelluksesi syvälinkitysominaisuuksien parantamiseksi:

Viivästetty syvälinkitys (Deferred Deep Linking)

Viivästetty syvälinkitys mahdollistaa niiden käyttäjien seuraamisen, jotka napsauttavat syvälinkkiä *ennen* PWA:n asentamista. Kun käyttäjä asentaa ja avaa PWA:n ensimmäistä kertaa, voit noutaa viivästetyn syvälinkin ja viedä hänet aiottuun sisältöön. Tämä on erityisen hyödyllistä markkinointikampanjoissa.

Kuinka se toimii:

1. Käyttäjä napsauttaa syvälinkkiä (esim. mainoksessa).
2. Jos PWA:ta ei ole asennettu, hänet ohjataan sovelluskauppaan tai PWA:n kotisivulle.
3. Seurantapalvelu tallentaa syvälinkin tiedot (esim. evästeeseen tai Local Storageen).
4. Kun käyttäjä asentaa ja avaa PWA:n, sovellus noutaa tallennetut syvälinkin tiedot.
5. Sovellus navigoi käyttäjän aiottuun sisältöön.

Useat kolmannen osapuolen palvelut tarjoavat viivästettyjä syvälinkitysratkaisuja.

Web App Manifestin käyttäminen

Web App Manifest (manifest.json) tarjoaa selaimelle tietoa PWA-sovelluksestasi, mukaan lukien sen nimen, kuvakkeet ja aloitus-URL:n. Voit käyttää manifestin start_url-ominaisuutta määrittämään URL-osoitteen, joka tulisi avata, kun PWA käynnistetään aloitusnäytöstä. Tätä voidaan käyttää perussyvälinkitystoiminnallisuuden toteuttamiseen.

Esimerkki:

            
{
  "name": "Oma PWA",
  "short_name": "PWA",
  "start_url": "/products/123",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

            

              
                Copy